<template>
  <div class="cloud_shop_popup" :class="className">
    <div v-html="css"></div>
    <!-- 新人开单 -->
    <van-popup v-model="newAccountShop" style="background: transparent" :close-on-click-overlay="false">
      <div class="showNew" v-if="datas">
        <div class="goodShow">
          <div class="goodBox ac">
            <div class="title">{{ datas.titleTxt }}</div>
            <div class="btn" v-if="datas.showBtn" @click="to_billing_Zone">{{ datas.btn_text }}</div>
          </div>
          <div class="goodBox mr" v-for="item in datas.list" :key="item.id">
            <div class="goodimg">
              <img :src="item.thumb" alt="" />
            </div>
            <div class="txt">
              {{ self_reward_name }}<span class="price_txt">{{ $i18n.t("money") }}{{item.cloud_shop_reward_amount}}</span>
            </div>
          </div>
        </div>
        <div class="close">
          <i class="iconfont icon-add2" @click="newAccountShop = false"></i>
        </div>
      </div>
    </van-popup>
    <!-- 开店成功 -->
    <van-popup v-model="openStore" style="background: transparent">
      <div class="openBox">
        <div class="sotreOpenBox">
          <div class="txt">恭喜开店成功！</div>
          <div class="btn" @click="toDiyPage">立即添加导师</div>
        </div>
        <div class="close">
          <i class="iconfont icon-add2" @click="openStore = false"></i>
        </div>
      </div>
    </van-popup>
    <van-popup v-model="newAccountTask" position="bottom" round style="background: transparent;max-height: 55vh" :style="{ 'padding-top': newAccount ? '1.5rem' : '' }">
      <div class="baseBox" v-if="datas && !newAccount">
        <div class="member_l_img">
          <img :src="cloud_shop_info.shop_logo" alt="" />
        </div>
        <div class="base_r">
          <div class="base_r_t">
            <div class="base_r_t_txt">
              {{ datas.CDown_txt }}
              <div class="downtime" v-if="count_timeShow">
                <van-count-down :time="count_timeShow">
                  <template #default="timeData">
                    <span class="block cr">{{ timeData.days }}</span>
                    <span class="colon">天</span>
                    <span class="block cr">{{ set_zone(timeData.hours) }}</span>
                    <span class="colon">时</span>
                    <span class="block cr">{{ set_zone(timeData.minutes) }}</span>
                    <span class="colon">分</span>
                    <span class="block cr">{{ set_zone(timeData.seconds) }}</span>
                    <span class="colon">秒</span>
                  </template>
                </van-count-down>
              </div>
            </div>
            <div class="base_r_t_icon"><i class="iconfont icon-icon_down1" @click="newAccount = true"></i></div>
          </div>
          <div class="base_r_b">
            <div class="line">
              <div class="line_l">{{ datas.upgradeTxt }}</div>
              <div class="btn" @click="to_billing_Zone">{{ datas.btn_text }}<i class="iconfont icon-play"></i></div>
            </div>
          </div>
        </div>
      </div>
      <div class="newTask" v-if="newAccount && datas">
        <div class="topBox">
          <div class="member_l">
            <div class="member_l_img">
              <img :src="cloud_shop_info.shop_logo" alt="" />
            </div>
            <div class="name">{{ cloud_shop_info.member_name }}</div>
          </div>
          <div class="member_r">
            <i class="iconfont icon-icon_up1" @click="newAccount = false"></i>
          </div>
        </div>
        <div class="taskList">
          <div class="taskLis" v-if="cloud_shop_info.master_status">
            <div class="task_l">
              <div class="task_l_t">
                <div class="task_l_t_left">升级任务</div>
                <div class="task_l_t_right">添加官方导师</div>
              </div>
              <div class="task_l_b">{{ cloud_shop_info.master_desc }}</div>
            </div>
            <div class="task_r" @click="toDiyPage(false)">{{ cloud_shop_info.wechat_follow ? "已添加" : "去添加" }}</div>
          </div>
          <div class="taskLis" v-if="cloud_shop_info.wechat_follow_status">
            <div class="task_l">
              <div class="task_l_t">
                <div class="task_l_t_left">升级任务</div>
                <div class="task_l_t_right">关注公众号</div>
              </div>
              <div class="task_l_b">{{ cloud_shop_info.wechat_follow_desc }}</div>
            </div>
            <div class="task_r" @click="getPoster">{{ cloud_shop_info.wechat_follow ? "已关注" : "去关注" }}</div>
          </div>
          <div class="taskLis" v-if="!cloud_shop_info.first_order_status">
            <div class="task_l">
              <div class="task_l_t">
                <div class="task_l_t_left">升级任务</div>
                <div class="task_l_t_right">首单任务</div>
              </div>
              <div class="task_l_b"></div>
            </div>
            <div class="task_r" @click="to_billing_Zone(false)">{{ cloud_shop_info.first_order_status ? "已完成" : "去开单" }}</div>
          </div>
        </div>
      </div>
    </van-popup>
    <!--  海报部分  -->
    <yz-goodsposter v-model="posterShow" :posterData="poster_Data" :defaultImg="poster" :width="`18.875rem`" v-on:finish="uploadImageM"></yz-goodsposter>
    <!--  海报部分  end  -->
  </div>
</template>
<script>
import _ from "lodash";
import yzGoodsposter from "components/ui_components/yz_goodsPoster";
const css = function() {
  if (this.datas) {
    if (this.component_key == "U_NComerZone") {
      let { preview_color, titleTxt_color, price_color, padding_top, padding_right, padding_left, padding_bottom, btn_text_color, btn_color } = this.datas;
      return `
      .component-${this.id} .showNew .goodShow{
        background-color: ${preview_color.color};
        background-image: url(${preview_color.isColor == 2 ? preview_color.image : ""});
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        padding-top:${padding_top}px;
        padding-right:${padding_right}px;
        padding-left:${padding_left}px;
        padding-bottom:${padding_bottom}px;
      }
      .component-${this.id} .showNew .goodShow .goodBox .title{
        color: ${titleTxt_color}
      }
      .component-${this.id} .showNew .goodShow .goodBox .btn{
        background-color: ${btn_color};
        color:${btn_text_color}
      }
      .component-${this.id} .showNew .goodShow .goodBox .txt .price_txt{
        color: ${price_color};
      }
    `;
    }
    if (this.component_key == "U_NComerUpgrade") {
      let { preview_color, CDown_txt_color, btn_color, icon_bg, icon_color, upgradeTxt_color, upgradeTxt_bg, btn_text_color } = this.datas;
      return `
      .component-${this.id} .baseBox ,.component-${this.id} .newTask{
        background-color:${preview_color};
      }
      .component-${this.id} .newTask .task_l_t_left{
        background-color:${preview_color};
      }
      .component-${this.id} .newTask .task_l_t{
        background: linear-gradient(90deg, ${preview_color} 0%,rgba(239, 173, 103, 0) 100%);
      }

      .component-${this.id} .baseBox .base_r .base_r_b .line .btn{
        color: ${btn_text_color};
        background-color: ${btn_color};
      }
      .component-${this.id} .task_r{
        background-color: ${btn_color};
        color: ${btn_text_color};
      }
      .component-${this.id} .baseBox .base_r .base_r_b .line{
        background-color:${upgradeTxt_bg};
      }
      .component-${this.id} .baseBox .base_r .base_r_b .line .line_l{
        color:${upgradeTxt_color}
      }
      .component-${this.id} .baseBox .base_r .base_r_t .downtime,.block,.colon{
        color:${CDown_txt_color};
      }
      .component-${this.id} .baseBox .base_r .base_r_t .base_r_t_icon{
        background-color:${icon_bg};
      }
      .component-${this.id} .baseBox .base_r .base_r_t .base_r_t_icon .icon-icon_down1{
        color:${icon_color};
      }
      .component-${this.id} .newTask .member_r {
        background-color:${icon_bg};
      }
      .component-${this.id} .newTask .member_r .icon-icon_up1{
        color:${icon_color};
      }

      `;
    }
  }
};
export default {
  props: ["datas", "component_key", "component_title", "page_id", "id"],
  data() {
    return {
      newAccount: false,
      openStore: false,
      newAccountShop: false,
      newAccountTask: false,
      self_reward_name: "销售佣金",
      cloud_shop_info: [],

      posterShow: false,
      poster: "",
      poster_Data: {
        poster_data: null,
        background: {}
      },
      poster_id: null, //海报id
    };
  },
  computed: {
    css() {
      return "<style>" + css.call(this) + "</style>";
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    },
    set_zone(key) {
      return function(key) {
        if (key < 10) {
          return "0" + key;
        }
        return key;
      };
    },
    count_timeShow() {
      let currentTime = Date.now();
      let timeValue = this.cloud_shop_info.first_order_check_time * 1000;
      let timeDifference = timeValue - currentTime;
      let daysDifference = Math.ceil(timeDifference / (1000 * 60 * 60 * 24));
      if (daysDifference <= 0) {
        return false;
      } else {
        return timeDifference;
      }
    }
  },
  mounted() {
    let yz_basic_info = JSON.parse(window.localStorage.getItem("yz_basic_info"));
    let shop_level_id = yz_basic_info.plugin_setting?.cloud_shop?.shop_level_id;
    let is_base = yz_basic_info.plugin_setting?.cloud_shop?.is_base;
    this.self_reward_name = yz_basic_info.plugin_setting?.cloud_shop?.self_reward_name;
    let first_order_status = yz_basic_info.plugin_setting.cloud_shop?.first_order_status;
    let wechat_follow = yz_basic_info.plugin_setting?.cloud_shop?.wechat_follow;
    let master_status = yz_basic_info.plugin_setting?.cloud_shop?.master_status; //是否开启导师开关
    this.cloud_shop_info = yz_basic_info.plugin_setting.cloud_shop;
    if (this.component_key == "U_NComerUpgrade") {
      if (is_base && (!wechat_follow || !first_order_status)) {
        // 实习店长才显示 并且没有完成任务
        this.newAccountTask = true;
        this.replaceText();
        return;
      }
    }
    if (this.component_key == "U_NComerZone") {
      // 有指定的等级权限
      if (this.datas.permissions && shop_level_id == this.datas.permissions) {
        this.get_shop_reward();
        return;
      } else {
        this.newAccountShop = false;
        return;
      }
    }
    if (this.component_key != "U_NComerUpgrade" && this.component_key != "U_NComerZone" && is_base && !wechat_follow && master_status) {
      this.openStore = true;
      // 实习店长并且没有关注公众号或者添加导师
    }
  },
  methods: {
    
    async get_shop_reward() {
      if(this.datas.list.length <= 0) return
      let ids = this.datas.list.map(ele => ele.id);
      let { data, msg, result } = await $http.post("plugin.cloud-shop.frontend.kaidan.index", { goods_ids: ids }, "");
      if (result) {
        this.newAccountShop = true;
        const idToGoodsMap = {};
        data.list.data.forEach(item => {
          idToGoodsMap[item.id] = item.cloud_shop_reward_amount;
        });
        this.datas.list.forEach(item => {
          if (idToGoodsMap[item.id]) {
            this.$set(item, "cloud_shop_reward_amount", idToGoodsMap[item.id]);
          }
        });
        console.log(this.datas.list)
      } else {
        this.$toast(msg);
      }
    },
    toDiyPage(key = true) {
      if (!key) {
        if (this.cloud_shop_info.wechat_follow) return;
        this.$router.push(this.fun.getUrl("cloud_shop_diyPage", {}));
        return;
      }
      this.openStore = false;
      this.$router.push(this.fun.getUrl("cloud_shop_diyPage", {}));
    },
    replaceText() {
      let xValue;
      xValue = 0;
      if (_.has(this.cloud_shop_info, "first_order_status") && this.cloud_shop_info.first_order_status == 0) xValue += 1;
      if (_.has(this.cloud_shop_info, "wechat_follow") && this.cloud_shop_info.wechat_follow_status == 1) xValue += 1;
      if (_.has(this.cloud_shop_info, "master_status") && this.cloud_shop_info.master_status == 1) xValue += 1;
      let { CDown_txt } = this.datas;
      // 使用正则表达式替换X
      CDown_txt = CDown_txt.replace(/X/, xValue.toString());
      CDown_txt = CDown_txt.replace(/Time/, "");
      // 更新数据
      this.datas.CDown_txt = CDown_txt;
    },
    to_billing_Zone(key = true) {
      if (!key) {
        if (this.cloud_shop_info.first_order_status) return;
        this.$router.push(this.fun.getUrl("billing_Zone", {}));
        return;
      }
      this.$router.push(this.fun.getUrl("billing_Zone", {}));
    },
    // 关注公众号海报
    uploadImageM(e) {
      //图片上传
      this.dataURL = e;
      let uploadImage = this.fun.getRealUrl("member.qrcode.uploadLocal", { local_upload: 1, poster_id: this.poster_id, is_new: this.isNewPosterPlugin ? 1 : 0 });
      let fd = new FormData();
      fd.append("file", this.dataURItoBlob(this.dataURL));
      axios
        .post(uploadImage, fd, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then(response => {
          if (response.data.result == 1) {
            $http
              .post("member.qrcode.poster-record", { poster_id: this.poster_id, image: response.data.data.img_url, is_new: this.isNewPosterPlugin ? 1 : 0 })
              .then(response => {
                if (response.result !== 1) this.$toast(response.msg);
              })
              .catch(error => {
                console.log(error);
              });
          } else {
            this.$toast(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    clearPostetInterval() {
      if (this.timer) {
        this.posterShow = true;
        clearInterval(this.timer);
        if (this.toastPoster) {
          this.toastPoster.clear();
        }
      }
    },
    getPoster_oldApi(e) {
      $http.get("member.poster").then(
        response => {
          if (response.result === 1) {
            this.poster = response.data.image_url;
            if (this.poster) this.clearPostetInterval();
          } else {
            this.$toast(response.msg);
            this.clearPostetInterval();
          }
        },
        response => {
          this.clearPostetInterval();
        }
      );
    },
    openQrCode_old(e) {
      if (!this.poster) {
        if (!this.timer) {
          this.getPoster_oldApi(e);
          this.timer = setInterval(() => {
            this.getPoster_oldApi(e);
          }, 3000);
        }
      } else {
        clearInterval(this.timer);
        this.toastPoster.clear();
      }
    },
    getPoster(e) {
      if(this.cloud_shop_info.wechat_follow) return
      if (!this.fun.isTextEmpty(this.poster_Data.poster_data) || !this.fun.isTextEmpty(this.poster)) {
        this.posterShow = true;
        return;
      }
      let that = this;
      $http.get("member.qrcode.get-poster", {}, {}).then(
        response => {
          if (response.result === 1) {
            this.isNewPosterPlugin = response.data.new || false;
            if (response.data.center_show == 0) {
              //0 返回的默认图片
              that.poster = response.data.image_url;
              that.posterShow = true;
            } else if (response.data.center_show == 1) {
              //前端生成
              that.poster_Data.background.src = response.data.background_url || response.data.background;
              that.poster_Data.background.type = "background";
              that.poster_Data.poster_data = response.data.style_data;
              that.poster_id = response.data.id;
              that.posterShow = true;
            } else if (response.data.center_show == 2) {
              //部分关注二维码不支持跨域，走老接口
              that.toastPoster = this.$toast({
                duration: -1, // 持续展示 toast
                message: "正在为您生成海报中"
              });
              that.openQrCode_old(e);
            }
          } else {
            this.$toast(response.msg);
          }
        },
        response => {
          this.clearPostetInterval();
        }
      );
    },
    dataURItoBlob(dataURI) {
      // 图片转成Buffer---------------------------------
      var byteString = atob(dataURI.split(",")[1]);
      var mimeString = dataURI
        .split(",")[0]
        .split(":")[1]
        .split(";")[0];
      var ab = new ArrayBuffer(byteString.length);
      var ia = new Uint8Array(ab);
      for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }
      return new Blob([ab], { type: mimeString });
    },
  },
  components:{yzGoodsposter}
};
</script>
<style lang="scss" scoped>
.baseBox {
  display: flex;
  padding: 0.75rem 0.625rem 4rem 0.625rem;
  box-sizing: border-box;
  .base_r {
    flex: 1;
    .base_r_b {
      margin-top: 0.875rem;
      .line {
        width: 100%;
        height: 1.5rem;
        border-radius: 0.88rem;
        padding: 0 0 0 0.59rem;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        overflow: hidden;
        .line_l {
          font-size: 0.81rem;
          color: #00001c;
          flex: 1;
          text-align: left;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .btn {
          flex-shrink: 0;
          width: 4.375rem;
          height: 1.5rem;
          border-radius: 0.88rem;
          line-height: 1.5rem;
          text-align: center;
          font-size: 0.81rem;
        }
      }
    }
    .base_r_t {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .base_r_t_txt {
        font-weight: 500;
        font-size: 0.81rem;
        display: flex;
        align-items: center;
      }
      .base_r_t_icon {
        width: 2rem;
        height: 1.375rem;
        border-radius: 0.875rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .member_l_img {
    flex-shrink: 0;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    margin-right: 0.34rem;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
}
.showNew {
  overflow: hidden;
  .goodShow {
    display: flex;
    border-radius: 0.63rem 0.63rem 0.63rem 0.63rem;
    box-sizing: border-box;
    .ac {
      justify-content: center;
      margin-right: 1.16rem;
    }
    .mr {
      margin-right: 0.5rem;
    }
    .goodBox {
      display: flex;
      flex-direction: column;
      .title {
        font-weight: bold;
        font-size: 1rem;
        color: #00001c;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
      }
      .btn {
        width: 4.25rem;
        height: 1.75rem;
        border-radius: 1.88rem 1.88rem 1.88rem 1.88rem;
        border: 0.03rem solid #f15353;
        font-weight: 500;
        font-size: 0.81rem;
        color: #f15353;
        line-height: 1.75rem;
        margin-top: 0.63rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .goodimg {
        width: 4.75rem;
        height: 4.75rem;
        background: #f0f0f1;
        border-radius: 0.5rem;
        img {
          width: 100%;
          height: 100%;
          border-radius: 0.5rem;
        }
      }
      .txt {
        margin-top: 0.44rem;
        font-weight: 500;
        font-size: 0.81rem;
        color: #808080;
        span {
          color: #f15353;
        }
      }
    }
  }
  .close {
    color: #d6d6dc;
    transform: rotate(45deg);
    overflow: hidden;
    margin-top: 1.5rem;
    .iconfont {
      font-size: 1.7rem;
    }
  }
}
.openBox {
  overflow: hidden;
  .close {
    color: #d6d6dc;
    transform: rotate(45deg);
    overflow: hidden;
    margin-top: 1.5rem;
    .iconfont {
      font-size: 1.7rem;
    }
  }
  .sotreOpenBox {
    height: 17rem;
    width: 17.63rem;
    background: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/cloud_shop%2FcaretStore.png");
    background-size: 100% 100%;
    background-position: 0 0;
    padding-top: 10rem;
    .txt {
      font-weight: bold;
      font-size: 1.13rem;
      color: #4e0808;
    }
    .btn {
      width: 8.44rem;
      height: 2.5rem;
      background: linear-gradient(173deg, #ffa678 0%, #fc3f3f 100%);
      border-radius: 1.38rem 1.38rem 1.38rem 1.38rem;
      text-align: center;
      font-weight: 500;
      font-size: 0.94rem;
      color: #ffffff;
      line-height: 2.5rem;
      margin: 0 auto;
      margin-top: 1.5rem;
    }
  }
}

.newTask {
  padding: 0 0.75rem 2rem;
  box-sizing: border-box;
  border-radius: 0.94rem 0.94rem 0 0;
  .taskList {
    margin-top: 1rem;
    overflow: hidden;
    .taskLis {
      background: #fcead5;
      border-radius: 0.63rem;
      padding: 0.75rem;
      box-sizing: border-box;
      margin-bottom: 0.63rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .task_r {
        padding: 0.59rem 0.91rem;
        box-sizing: border-box;
        border-radius: 1rem;
        font-weight: 500;
        font-size: 0.81rem;
      }
      .task_l {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        .task_l_b {
          width: 100%;
          font-size: 0.81rem;
          color: #441700;
          margin-top: 0.5rem;
          text-align: left;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .task_l_t {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          font-size: 0.88rem;
          // background: linear-gradient(90deg, #ec9944 0%, rgba(239, 173, 103, 0) 100%);
          border-radius: 0.31rem 0.31rem 0.31rem 0.31rem;
          .task_l_t_left {
            font-weight: bold;
            padding: 0.31rem 0.22rem;
            border-radius: 0.31rem 0.31rem 0.31rem 0.31rem;
          }
          .task_l_t_right {
            font-weight: 500;
            padding: 0.31rem 0.22rem;
          }
        }
      }
    }
  }
  .topBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .member_r {
      width: 2rem;
      height: 1.375rem;
      border-radius: 0.875rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .member_l {
      display: flex;
      align-items: center;
      .name {
        font-weight: bold;
        font-size: 1.25rem;
        color: #111111;
      }
      .member_l_img {
        width: 3.88rem;
        height: 3.88rem;
        margin-right: 0.66rem;
        margin-top: -1.5rem;
        border-radius: 50%;
        background: #e9e9e9;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>
